<template>
  <div class="xuan" ref="xz">
    <div
      v-for="item in xuan"
      :key="item.id"
      class="img"
      @mouseover="onchange(item.id)"
      @mouseout="onchange(item.id)"
      @click="onclick(item.text)"
    >
      <img v-show="isBlue" :src="item.blueImg" />
      <img v-show="!isBlue" :src="item.blueImg" />
      <p>{{ item.text }}</p>
      <img src="" alt="">
    </div>
    
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
interface typexuan {
  id: number;
  blueImg: string;
  yellowImg: string;
  text: string;
  isBlue: boolean;
}
const xuan = reactive<Array<typexuan>>([
  {
    id: 1,
    blueImg: "src/assets/images/dingwei_nor.png",
    yellowImg: "src/assets/images/dingwei_hov.png",
    text: "车辆定位导航系统",
    isBlue: true,
  },
  {
    id: 2,
    blueImg: "src/assets/images/fenxi_nor.png",
    yellowImg: "src/assets/images/fenxi_hov.png",
    text: "可视化作战平台",
    isBlue: true,
  },
  {
    id: 3,
    blueImg: "src/assets/images/huaxiang_nor.png",
    yellowImg: "src/assets/images/huaxiang_hov.png",
    text: "交通安全画像系统",
    isBlue: true,
  },
  {
    id: 4,
    blueImg: "src/assets/images/重点车辆监管系统_nor.png",
    yellowImg: "src/assets/images/重点车辆监管系统_hov.png",
    text: "重点车辆管理系统",
    isBlue: true,
  },
  {
    id: 5,
    blueImg: "src/assets/images/jiankong_nor.png",
    yellowImg: "src/assets/images/jiankong_hov.png",
    text: "交通态势监控系统",
    isBlue: true,
  },
  {
    id: 6,
    blueImg: "src/assets/images/tingche_nor.png",
    yellowImg: "src/assets/images/tingche_hov.png",
    text: "车辆停车监控系统",
    isBlue: true,
  },
]);
const xz = ref();
onMounted(() => {
  for (let a = 0; a < xz.value.children.length; a++) {
    xz.value.children[a].style["animation-delay"] = `${-5 - a * 3.3}s,-${
      a * 3.3
    }s,-${a * 3.3}s`;
  }
});
const onchange=(id:number)=>{
    let obj=xuan.find(item=>item.id===id)
    obj.isBlue=!obj.isBlue
  for(let a=0; a < xz.value.children.length; a++){
    xz.value.children[a].style['animation-paly-state']=obj.isBlue ?'running':'paused'
  } 
}
const onclick = (text: string) => {
  alert(text);
};
</script>
<style scoped lang="scss">
@keyframes moveX {
  0% {
    left: -100px;
  }
  100% {
    left: 80%;
  }
}
@keyframes moveY {
  0% {
    top: 0;
  }
  100% {
    top: 60%;
  }
}
@keyframes moveScale {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
.xuan{
    margin-top: 80px;
    color: white;
    position: relative;
    height: 80%;
    width: 100%;
    .img{
        width: 200px;
        height: 200px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        animation-name: moveX,moveY,moveScale;
        animation-duration: 10s,10s,20s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0.36,0,0.64,1);
    }
}
</style>